<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<base href="<%=basePath%>">
<link rel="shortcut icon" type="image/x-icon"
	href="../images/defaultheadpic.png" />
<link href="<%= basePath%>css/bootstrap.css" rel='stylesheet'
	type='text/css' />
<link href="<%= basePath%>css/style.css" rel='stylesheet'
	type='text/css' />
<script src="<%= basePath%>js/jquery.min.js"> </script>
<link
	href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700|Cinzel+Decorative:400,700'
	rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<%= basePath%>css/myresponsee.css">
<link rel="stylesheet" href="<%= basePath%>css/style1.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<%= basePath%>css/responsive.css" rel="stylesheet">
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="<%= basePath%>js/respond.js"></script>
<link rel="shortcut icon" type="image/x-icon"
	href="../images/defaultheadpic.png" />

<meta name="keywords" content="">
<meta name="description" content="">
<link href="<%=basePath%>css/iconfont.css" rel="stylesheet" />
<link href="<%=basePath%>css/common1.css" rel="stylesheet" />
<link href="<%=basePath%>css/uc.css" rel="stylesheet" />
<style>
#gouwu1 {
	position: relative;
	height: 300px;
	width: 570px;
	top: -50px;
	left: 350px;
}

.icon-text {
	font-family: 华文楷体;
}

.icon-text li a {
	color: #ffffff;
}

.logo1 {
	position: relative;
	margin-top: -230px;
	left: -450px;
}

nav {
	display: inline-block;
	top: -60px;
	left: 460px;
	font-family: 本墨锵黑;
	font-size: 16px;
}

nav a {
	display: inline-block;
	color: white;
	text-decoration: none;
	perspective: 200px;
}

nav a span {
	line-height: 40px;
	background-color: #fdf0ef;
	display: inline-block;
	padding: 0 30px;
	position: relative;
	transform-origin: top;
	transition: all 1s;
	transform-style: preserve-3d;
}

nav a span::after {
	content: attr(data-hover);
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #000000;
	text-align: center;
	color: #ffffff;
	width: 100%;
	height: 100%;
	transform: rotateX(-90deg);
	transform-origin: top;
}

nav a:hover span {
	transform: rotateX(90deg) translateY(-20px);
}

#jia {
	position: relative;
	margin-top: -30px;
	margin-left: 200px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

#jian {
	position: relative;
	margin-top: -30px;
	margin-left: 60px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.uc-header-bg {
	/*background-color: #f39894;*/
	background-color: rgba(0, 0, 0, 0.28);
	height: 90px;
}

#shoucang {
	position: relative;
	top: -23px;
	left: 80px;
	height: 20px;
	width: 20px;
}

.section {
	background-color: #fff;
}
</style>


</head>

<body class="size-1140">


	<!-- SLIDESHOW START -->
	<div class="uc-header-bg">
		<div class="uc-header wrapper">
			<div class="logo1">
				<a class="logo" href="<%=basePath%>jsp/index.jsp"> <img
					src="<%=basePath%>images/LOGOMeiTao.png"
					style="width: 100px; height: 70px;" alt="" /></a>
			</div>

		</div>
		<nav>
			<a href="<%= basePath %>goods/glist.action?categoryid=2"> <span
				data-hover="电脑">电脑</span>
			</a> <a href="<%= basePath %>goods/glist.action?categoryid=5"> <span
				data-hover="手机">手机</span>
			</a> <a href="<%= basePath %>goods/glist.action?categoryid=3"> <span
				data-hover="平板">平板</span>
			</a> <a href="<%= basePath %>goods/glist.action?categoryid=4"> <span
				data-hover="相机">相机</span>
			</a> <a href="<%= basePath %>goods/glist.action?categoryid=1"> <span
				data-hover="手表">手表</span>
			</a> <a href="<%= basePath %>goods/glist.action?categoryid=6"> <span
				data-hover="其他">其他</span>
			</a> <a href="<%=basePath%>goods/myOrder.action"> <span
				data-hover="个人中心">个人中心</span>
			</a> <a href="<%=basePath%>jsp/cart.jsp"> <span data-hover="购物车">购物车</span>
			</a>
		</nav>
	</div>
	<!-- SLIDESHOW END -->



	<div class="section">

		<!-- heading and description -->
		<div class="line">
			<div class="fullwidth margin-bottom-20">
				<h1 class="text-center">我的购物车</h1>
				<p class="text-center">随心所欲，享受购物</p>
				<hr class="break-small break-center">
			</div>
		</div>

		<c:if test="${empty cart||empty cart.cartItems}">

			<div class="fullwidth cart-item">

				<div class="s-12 m-8 l-9 cart-item-detail">
					<div id="zi" style="text-align: center">
						<h6>
							<a href="<%=basePath%>jsp/index.jsp">
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img
								id="gouwu1" src="<%=basePath%>images/gouwu1.jpg">
							</a>
						</h6>
					</div>
				</div>
			</div>
		</c:if>
		<c:if test="${not empty cart.cartItems}">
			<!-- cart left and right -->
			<div class="line">
				<div class="s-12 m-12 l-7">
					<c:forEach items="${cart.cartItems}" var="cart">
						<!-- item 1 -->
						<div class="fullwidth cart-item">
							<div class="s-12 m-4 l-3 cart-item-image" id="imgs">
								<img src="<%= basePath%>${cart.good.goodpic}" alt="">
							</div>
							<div class="s-12 m-8 l-9 cart-item-detail">
								<h4>${cart.good.goodname}</h4>
								<p>
									价格: <span class="strike">Was $150</span> Now
									${cart.good.goodprice}<br /> 数量: ${cart.count}<br /> 总价: <span
										class="text-primary">${cart.subtotal}</span>
								</p>
								<p>
									<a href="javascript:void(0);"
										onclick="removeFromCart('${cart.good.goodid}')"
										class="remove-item">移除</a>
								</p>
							</div>
						</div>
					</c:forEach>

				</div>
				<div id="right">
					<div class="s-12 m-12 l-4 margin-m-top-60 padding border-1">
						<p class="margin-bottom text-size-16">
							配送费: <span class="right">免费</span>
						</p>
						<p class="margin-bottom text-size-16">
							总价: <span class="right">${cart.totalprice}</span>
						</p>
						<a
							href="<%=basePath %>goods/removeAllCart.action?method=removeAll"
							class="button">清空购物车</a>&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="<%=basePath %>goods/order.action?method=save"
							class="button">提交订单</a>
					</div>
				</div>
		</c:if>
		<script type="text/javascript">
            function removeFromCart(gid){
                if(confirm("您确定要删除吗？")){
                    location.href="<%=basePath %>goods/removecart.action?method=remove&gid="+gid;
                }
            }

        </script>

		<!-- cart right -->

	</div>
	</div>
	<!-- PAGE CONTENT END -->


	<!-- RELATED PRODUCTS START -->
	<!-- <div class="section padding-top-0"> -->
	<!--     <div class="line"> -->
	<!--         <div class="margin"> -->
	<!--             <div class="fullwidth margin-bottom-20"> -->
	<!--                 <h2 class="text-center">热卖产品</h2> -->
	<!--                 <hr class="break-small break-center"> -->
	<!--             </div> -->

	<%--             <c:forEach items="${hotSaleGoodsList}" var="hotsalegoods"> --%>
	<!--                 <div class="s-12 m-4 l-3 margin-bottom-30"> -->
	<!--                     <div class="margin"> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <figure class="imghvr-reveal-down"> -->
	<%--                                 <img src="<%= basePath%>${hotsalegoods.goodpic}"> --%>
	<!--                                 <figcaption> -->
	<!--                                     <div class="product-hover-content"> -->
	<!--                                         <div class="btn-box"> -->
	<%--                                             <a href="<%= basePath%>goods/list.action?goodid=${hotsalegoods.goodid}" class="btn">查看更多</a> --%>
	<!--                                         </div> -->
	<!--                                     </div> -->
	<!--                                 </figcaption> -->
	<!--                             </figure> -->
	<!--                         </div> -->
	<!--                         <div class="fullwidth"> -->
	<%--                             <h5>${hotsalegoods.goodname}</h5> --%>
	<%--                             <p class="text-center"><span class="strike">$149.00</span> &nbsp;&nbsp; <span class="text-primary">现价：${hotsalegoods.goodprice}元</span></p> --%>
	<!--                         </div> -->
	<!--                     </div> -->
	<!--                 </div> -->
	<%--             </c:forEach> --%>
	<%--             <c:if test="${empty hotSaleGoodsList}"> --%>
	<!--                 product 1 -->
	<!--                 <div class="s-12 m-4 l-3 margin-bottom-30"> -->
	<!--                     <div class="margin"> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <figure class="imghvr-reveal-down"> -->
	<%--                                 <img src="<%= basePath%>images/1_02.jpg"> --%>
	<!--                                 <figcaption> -->
	<!--                                     <div class="product-hover-content"> -->
	<!--                                         <div class="btn-box"> -->
	<%--                                             <a href="<%= basePath%>goods/list.action?goodid=10002" class="btn">查看更多</a> --%>
	<!--                                         </div> -->
	<!--                                     </div> -->
	<!--                                 </figcaption> -->
	<!--                             </figure> -->
	<!--                         </div> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <h5>Lorem Ipsum Elit Dolor</h5> -->
	<!--                             <p class="text-center"><span class="strike">$149.00</span> &nbsp;&nbsp; <span class="text-primary">$130.00</span></p> -->
	<!--                         </div> -->
	<!--                     </div> -->
	<!--                 </div> -->

	<!--                 product 2 -->
	<!--                 <div class="s-12 m-4 l-3 margin-bottom-30"> -->
	<!--                     <div class="margin"> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <figure class="imghvr-reveal-down"> -->
	<%--                                 <img src="<%= basePath%>images/2_02.jpg"> --%>
	<!--                                 <figcaption> -->
	<!--                                     <div class="product-hover-content"> -->
	<!--                                         <div class="btn-box"> -->
	<%--                                             <a href="<%= basePath%>goods/list.action?goodid=10052" class="btn">查看更多</a> --%>
	<!--                                         </div> -->
	<!--                                     </div> -->
	<!--                                 </figcaption> -->
	<!--                             </figure> -->
	<!--                         </div> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <h5>Lorem Ipsum Elit Dolor</h5> -->
	<!--                             <p class="text-center"><span class="strike">$149.00</span> &nbsp;&nbsp; <span class="text-primary">$130.00</span></p> -->
	<!--                         </div> -->
	<!--                     </div> -->
	<!--                 </div> -->

	<!--                 product 3 -->
	<!--                 <div class="s-12 m-4 l-3 margin-bottom-30"> -->
	<!--                     <div class="margin"> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <figure class="imghvr-reveal-down"> -->
	<%--                                 <img src="<%= basePath%>images/3_03.jpg"> --%>
	<!--                                 <figcaption> -->
	<!--                                     <div class="product-hover-content"> -->
	<!--                                         <div class="btn-box"> -->
	<%--                                             <a href="<%= basePath%>goods/list.action?goodid=10043" class="btn">查看更多</a> --%>
	<!--                                         </div> -->
	<!--                                     </div> -->
	<!--                                 </figcaption> -->
	<!--                             </figure> -->
	<!--                         </div> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <h5>Lorem Ipsum Elit Dolor</h5> -->
	<!--                             <p class="text-center"><span class="strike">$149.00</span> &nbsp;&nbsp; <span class="text-primary">$130.00</span></p> -->
	<!--                         </div> -->
	<!--                     </div> -->
	<!--                 </div> -->

	<!--                 product 4 -->
	<!--                 <div class="s-12 m-4 l-3 margin-bottom-30"> -->
	<!--                     <div class="margin"> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <figure class="imghvr-reveal-down"> -->
	<%--                                 <img src="<%= basePath%>images/4_03.jpg"> --%>
	<!--                                 <figcaption> -->
	<!--                                     <div class="product-hover-content"> -->
	<!--                                         <div class="btn-box"> -->
	<%--                                             <a href="<%= basePath%>goods/list.action?goodid=10033" class="btn">查看更多</a> --%>
	<!--                                         </div> -->
	<!--                                     </div> -->
	<!--                                 </figcaption> -->
	<!--                             </figure> -->
	<!--                         </div> -->
	<!--                         <div class="fullwidth"> -->
	<!--                             <h5>Lorem Ipsum Elit Dolor</h5> -->
	<!--                             <p class="text-center"><span class="strike">$149.00</span> &nbsp;&nbsp; <span class="text-primary">$130.00</span></p> -->
	<!--                         </div> -->
	<!--                     </div> -->
	<!--                 </div> -->

	<%--             </c:if> --%>

	<!--         </div> -->
	<!--     </div> -->
	<!-- </div> -->



	<!--/start-footer-section-->
	<div class="footer-section">
		<div class="footer-grids">
			<div class="col-md-3 footer-grid">
				<h4>最受欢迎</h4>
				<div class="border2"></div>
				<p>手机系列「iphone 11」年度最强ios手机</p>
				<p class="sub">手机系列 「一加8」年度最强安卓手机</p>
				<p class="sub">相机系列 「徕卡」记录美好的事物</p>
			</div>
			<div class="col-md-3 footer-grid tags">
				<h4>类别</h4>
				<div class="border2"></div>
				<ul class="tag">
					<li><a href="#">手 机</a></li>
					<li><a href="#">电 脑</a></li>
					<li><a href="#">平 板</a></li>
					<li><a href="#">相 机</a></li>
					<li><a href="#">手 表</a></li>
					<li><a href="#">其 他</a></li>


				</ul>
			</div>
			<div class="col-md-3 footer-grid tweet">
				<h4>关于我们</h4>
				<div class="border2"></div>
				<div class="icon-3-square">
					<a href="#"><i class="square-3"></i></a>
				</div>
				<div class="icon-text">
					<ul>
						<li><a href="#">选 择 数 码 次 元</a></li>
						<li><a href="#">数 码 次 元 商 城</a></li>
						<li><a href="#">数 码 次 元 中 心</a></li>
						<li><a href="#">品 类 选 择</a></li>
					</ul>
				</div>

				<div class="clearfix"></div>
				<div class="icon-3-square">
					<a href="#"><i class="square-3"></i></a>
				</div>
				<div class="icon-text">
					<ul>
						<li><a href="#">服 务 中 心</a></li>
						<li><a href="#">常 见 问 题</a></li>
						<li><a href="#">联 系 我 们</a></li>
						<li><a href="#">tel:157-9786-2663</a></li>
						<li><a href="#">email:1421070960@qq.com</a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="col-md-3 footer-grid flickr">
				<h4>flickr feed</h4>
				<div class="border2"></div>
				<div class="flickr-grids">
					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/1_06.jpg" alt="" /></a>
					</div>
					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/4_15.jpg" alt="" /></a>
					</div>
					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/6_03.jpg" alt="" /></a>
					</div>
					<div class="clearfix"></div>

					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/3_05.jpg" alt="" /></a>
					</div>
					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/2_04.jpg" alt="" /></a>
					</div>
					<div class="flickr-grid">
						<a href="#"><img src="<%= basePath%>images/5_09.jpg" alt="" /></a>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//end-footer-section-->
	<!--/start-copyright-section-->
	<div class="copyright">
		<p class="write">
			Copyright &copy; 2018 All rights Reserved | Design by <a href="#">美乎网</a>
		</p>
	</div>


	<!--//end-footer-section-->
	<!--/start-copyright-section-->

	<!-- jQuery Files -->
	<script type="text/javascript"
		src="<%= basePath%>js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="<%= basePath%>js/jquery-ui.min.js"></script>
	<script type="text/javascript"
		src="<%= basePath%>owl-carousel/owl.carousel.js"></script>
	<script type="text/javascript" src="<%= basePath%>js/custom.js"></script>
	<script src="<%=basePath%>js/jquery.js"></script>
	<link rel="stylesheet" href="<%=basePath%>css/style2.css" />
	<script src="<%=basePath%>js/icheck.min.js"></script>
	<script src="<%=basePath%>js/laydate.js"></script>
	<script src="<%=basePath%>js/global.js"></script>



</body>
</html>

